<template>
	<!--抢红包组件-->
	<li class="hong-bao-box">
            <div class="hong-box">
                <p class="red-box"></p>
                <span class="red-box1"></span>
                <span class="red-box2"></span>
                <span class="red-box3"></span>
                <span class="red-box4"></span>
                <span class="red-box5"></span>
                <span class="red-box6"></span> 
            </div>    
	</li>
</template>

<script>
	export default {
		props:{
	
		},
		data(){
			return{
				
			}
		},
		computed:{

		},
		created(){
          	     		  
		},
		destroyed(){
		
		},
		mounted(){
			
		},
		methods:{
				
		}
	}
</script>

<style scoped="scoped">
	.hong-bao-box {
		background: transparent !important;
		margin-bottom: 10px;
	}
    .hong-box{
        position: relative;
        height: 100%;
        width: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        transform-origin: 100% 100%;
		
    }
    .red-box {
        position: absolute;
		width: 62px;
		height: 68px;
		background: url(../../../assets/images/hongBao/hongBao.png) no-repeat;
		background-size: 100% 100%;
        animation-name: swing;
		animation-duration: 1s;
		animation-iteration-count: infinite;
		animation-timing-function: ease-in-out;
		animation-delay: 0s;
		animation-play-state: running;
        z-index: 11;
        
	}
    .red-box1{
        position: absolute;
        right: -10px;
        top: -20px;
        display: inline-block;
        width: 40px;
        height:40px;
        background: url(../../../assets/images/hongBao/hong1.png) no-repeat;
        background-size: 100% 100%;
        -webkit-animation-name: scaleDraws; 
        -webkit-animation-timing-function: ease-in-out; 
        -webkit-animation-iteration-count: infinite; 
        -webkit-animation-duration: 5s;
        z-index: 10;
 
       
    }
    .red-box2{
        position: absolute;
        left:20px;
        top: -26px;
        display: inline-block;
        width: 20px;
        height:20px;
        background: url(../../../assets/images/hongBao/hong2.svg) no-repeat;
        background-size: 100% 100%;
        -webkit-animation-name: scaleDraw; 
        -webkit-animation-timing-function: ease-in-out; 
        -webkit-animation-iteration-count: infinite; 
        -webkit-animation-duration: 5s;
       z-index: 10;
    }
     .red-box3{
        position: absolute;
        left:4px;
        bottom: 10px;
        display: inline-block;
        width: 15px;
        height:15px;
        background: url(../../../assets/images/hongBao/hong3.svg) no-repeat;
        background-size: 100% 100%;
        -webkit-animation-name: scaleDraw; 
        -webkit-animation-timing-function: ease-in-out; 
        -webkit-animation-iteration-count: infinite; 
        -webkit-animation-duration: 5s;
         z-index: 12;
    }
     .red-box4{
        position: absolute;
        right: -13px;
        bottom: -12px;
        display: inline-block;
        width: 26px;
        height:26px;
        background: url(../../../assets/images/hongBao/hong4.svg) no-repeat;
        background-size: 100% 100%;
        -webkit-animation-name: scaleDraw; 
        -webkit-animation-timing-function: ease-in-out; 
        -webkit-animation-iteration-count: infinite; 
        -webkit-animation-duration: 5s;
         z-index: 10;
       
    }
     .red-box5{
        position: absolute;
        left:-18px;
        bottom: -10px;
        display: inline-block;
        width: 26px;
        height:26px;
        background: url(../../../assets/images/hongBao/hong6.svg) no-repeat;
        background-size: 100% 100%;
        -webkit-animation-name: scaleDraw; 
        -webkit-animation-timing-function: ease-in-out; 
        -webkit-animation-iteration-count: infinite; 
        -webkit-animation-duration: 5s;
         z-index: 12;
       
    }
     .red-box6{
        position: absolute;
        left:-18px;
        top: 18px;
        display: inline-block;
        width: 14px;
        height:14px;
        background: url(../../../assets/images/hongBao/hong7.svg) no-repeat;
        background-size: 100% 100%;
        -webkit-animation-name: scaleDraw; 
        -webkit-animation-timing-function: ease-in-out; 
        -webkit-animation-iteration-count: infinite; 
        -webkit-animation-duration: 5s;
         z-index: 8;
       
    }
  
	@keyframes swing {
        0% {
            transform: translate(0px, 0px);
        }
        50% {
            transform: translate(0px, 10px);
        }
        100% {
            transform: translate(0px, 0px);
        }
}
 @keyframes scaleDraw {  /*定义关键帧、scaleDrew是需要绑定到选择器的关键帧名称*/
            0%{
                transform: scale(1);  
            }
            50%{
                transform: scale(1.5);
            }
            75%{
                transform: scale(1);
            }
        }
         @keyframes scaleDraws {  /*定义关键帧、scaleDrew是需要绑定到选择器的关键帧名称*/
            0%{
                transform: scale(1);  
            }
            50%{
                transform: scale(1.2);
            }
            75%{
                transform: scale(1);
            }
        }
</style>